Сайто-строитель.рф – это личный блог автора блога А. Протасова.
Всё это и многон другое вы найдёте на сайте www.сайто-строитель.рф
<!-- Блок картинки пример №1 --> <div class="block" id="block"> <div> <a href="http://сайто-строитель.рф/"><img src="img/img1.jpg" /></a> </div> <div> <a href="http://сайто-строитель.рф/"><img src="img/img2.jpg" /></a> </div> <div> <a href="http://сайто-строитель.рф/"><img src="img/img3.jpg" /></a> </div> </div> <!-- Блок картинки пример №1 --> <br> <h2> Пример №2. Простое увеличение.</h2> <!-- Блок картинки пример №2 --> <div class="block2" id="block2"> <a href="http://сайто-строитель.рф/"><img src="img/img1.jpg" /></a> <a href="http://сайто-строитель.рф/"><img src="img/img2.jpg" /></a> <a href="http://сайто-строитель.рф/"><img src="img/img3.jpg" /></a> </div> <!-- Блок картинки пример №2 --> |
/* Стили для примеров работы увеличения изображения */ .block{ width: 940px; height:320px; background-color: #FFFEF6; border: 1px solid #121AF0; margin: auto; box-shadow: 5px 5px 10px #5F5F5F; -o-box-shadow: 5px 5px 10px #5F5F5F; -ms-box-shadow: 5px 5px 10px #5F5F5F; -moz-box-shadow: 5px 5px 10px #5F5F5F; -khtml-box-shadow: 5px 5px 10px #5F5F5F; -webkit-box-shadow: 5px 5px 10px #5F5F5F; } /* Здесь начинаются правила для примера №1 */ #block div{ width: 300px; height:300px; float: left; background-color: #E4E4E4; border: 1px solid #121AF0; margin: 8px 0px 8px 8px; overflow:hidden; /* overflow управляет отображением содержания блочного элемента, если оно целиком не помещается и выходит за область заданных размеров */ /* hidden Отображается только область внутри элемента, остальное будет скрыто. */ } #block img{ width: 300px; height:300px; /* Скорость анимации. В данном случае 1 секунда 1S */ -moz-transition: all 1s ease-out; /* для Firefox */ -o-transition: all 1s ease-out; /* для браузера Опера */ -webkit-transition: all 1s ease-out; /* для Google Chrome и Safari */ } #block img:hover{ /* Увеличение изображения. */ -webkit-transform: scale(1.3); /* для Google Chrome и Safari */ -moz-transform: scale(1.3); /* для Firefox */ -o-transform: scale(1.3); /* для браузера Опера */ } /* Здесь начинаются правила для примера №2 */ .block2{ width: 920px; height:320px; background-color: #FFFEF6; border: 1px solid #121AF0; margin: auto; box-shadow: 5px 5px 10px #5F5F5F; -o-box-shadow: 5px 5px 10px #5F5F5F; -ms-box-shadow: 5px 5px 10px #5F5F5F; -moz-box-shadow: 5px 5px 10px #5F5F5F; -khtml-box-shadow: 5px 5px 10px #5F5F5F; -webkit-box-shadow: 5px 5px 10px #5F5F5F; } #block2 img{ width: 300px; height:300px; margin: 2px auto; border: 1px solid #3AE2CE; overflow:hidden; /* Скорость анимации. В данном случае 1 секунда 1S */ -moz-transition: all 1s ease-out; /* для Firefox */ -o-transition: all 1s ease-out; /* для браузера Опера */ -webkit-transition: all 1s ease-out; /* для Google Chrome и Safari */ } #block2 img:hover{ border: 1px solid #FF00AE; /* Увеличение изображения. */ -webkit-transform: scale(1.5); /* для Google Chrome и Safari */ -moz-transform: scale(1.5); /* для Firefox */ -o-transform: scale(1.5); /* для браузера Опера */ } /* Конец стилей увеличения изображения */ |